<template>
	<view class="template-set">
		<!-- 由于暂时h5版本存在问题 所以暂时不放开 -->
		<view v-if="vuex_is_app" class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding" @click="$common.navigateTo('/pages/my/avatar')">
			<view class="justify-content-item">
				<view class="tn-text-bold tn-text-lg">
					用户头像
				</view>
				<view class="tn-color-gray tn-padding-top-xs">
					有趣的头像，百里挑一
				</view>
			</view>
			<view class="justify-content-item tn-text-lg tn-color-grey">
				<view class="tn-icon-right tn-padding-top"></view>
			</view>
		</view>

		<view class="tn-flex tn-flex-row-between tn-strip-bottom tn-padding" @click="$common.navigateTo('/pages/my/safety')">
			<view class="justify-content-item">
				<view class="tn-text-bold tn-text-lg">
					账号安全
				</view>
				<view class="tn-color-gray tn-padding-top-xs">
					修改用户昵称、密码
				</view>
			</view>
			<view class="justify-content-item tn-text-lg tn-color-grey">
				<view class="tn-icon-right tn-padding-top"></view>
			</view>
		</view>

		<view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding tn-margin-top-xs" @click="$common.navigateTo('/pages/detail/index?newsId=-20')">
			<view class="justify-content-item">
				<view class="tn-text-bold tn-text-lg">隐私政策</view>
			</view>
			<view class="justify-content-item tn-text-lg tn-color-grey">
				<view class="tn-icon-right"></view>
			</view>
		</view>
		<view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding tn-margin-top-xs" @click="$common.navigateTo('/pages/detail/index?newsId=-30')">
			<view class="justify-content-item">
				<view class="tn-text-bold tn-text-lg">帮助中心</view>
			</view>
			<view class="justify-content-item tn-text-lg tn-color-grey">
				<view class="tn-icon-right"></view>
			</view>
		</view>

		<view v-if="vuex_is_app" class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding tn-margin-top-xs" @click="checkVersion">
			<view class="justify-content-item">
				<view class="tn-text-bold tn-text-lg">版本更新</view>
			</view>
			<view class="tn-flex justify-content-item tn-text-lg tn-color-grey">
				<view class="versionName" style="margin-right:20rpx;">1.0.0</view>
				<view class="tn-icon-right"></view>
			</view>
		</view>

		<view class="tn-flex  tn-footerfixed">
			<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center" @click="loginOutShow = true;">
				<tn-button shape="round" backgroundColor="#ffd946" fontColor="#000000" padding="40rpx 0" width="60%" shadow fontBold>
					退出登录
				</tn-button>
			</view>
		</view>
		<tn-modal v-model="loginOutShow" @click="loginOutModel" showCloseBtn title="提示" content="你确定要退出登录吗？" :button="button"></tn-modal>
	</view>
</template>

<script>
	// #ifdef APP-PLUS
	import APPUpdate from '@/libs/update/appUpdate.js';
	// #endif
	import { logout } from '@/api/common/auth';
	export default {
		name: 'MySetting',
		mixins: [],
		data() {
			return {
				loginOutShow: false,
				currVersion: '',
				button: [{
						text: '取消',
						backgroundColor: '#E6E6E6',
						plain: true,
					},
					{
						text: '确定',
						backgroundColor: '#ffd946',
						fontColor: '#000000'
					}
				],
			}
		},
		onLoad() {
			// #ifdef APP-PLUS
			this.currVersion = plus.runtime.version;
			// #endif
		},
		methods: {
			/**
			 * 版本检查
			 */
			checkVersion() {
				// #ifdef APP-PLUS
				APPUpdate(true);
				// #endif
			},
			/**
			 * 退出登录
			 * @param {Object} obj
			 */
			loginOutModel(obj) {
				if (obj.index == 1) {
					logout().then(res => {
						if (res.code == 200) {
							this.$tn.vuex('vuex_login_flag', false);
							this.$tn.vuex('vuex_token', null);
							this.$tn.vuex('vuex_user', null);
							uni.$tn.message.toast(res.msg);
							this.$common.navigateTo('/pages/login/login');
						}
					}).finally(res => {})
				}
				this.loginOutShow = false;
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* 间隔线 start*/
	.tn-strip-bottom-min {
		width: 100%;
		border-bottom: 1rpx solid #F8F9FB;
	}

	.tn-strip-bottom {
		width: 100%;
		border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
	}

	.tn-footerfixed {
		position: fixed;
		width: 100%;
		bottom: calc(30rpx + env(safe-area-inset-bottom));
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
	}
</style>